<!doctype html>
<html lang="en">	
	<head>
		<meta charset="UTF-8">
		<meta name="Generator" content="EditPlus®">
		<meta name="Author" content="">
		<meta name="Keywords" content="">
		<meta name="Description" content="">
		<title>31-背景新增属性+渐变</title>
		<style>
			*{margin:0;padding:0;}
			a{text-decoration:none;}
			ul,li{list-style:none;}
			body{font-size:12px;font-family:"微软雅黑";}
			.box{
				width: 600px;
				height:100px;
				margin:10px auto;
			}
			
			.box .box1{
				display:inline-block;
				width:200px;
				height:50px;
				border:1px solid #111;
				background-image: linear-gradient(45deg, yellow, red);
				animation:box1 2s linear infinite forwards;
			}
			@keyframes box1{
				0%{
					width:200px;
				}
				100%{
					width:300px;
				}
			}
			.box .box2{
				display:inline-block;
				border:40px solid transparent;
				border-left:40px solid green;
			}
			
		</style>
	</head>
	<body>
		
			<div class="box">
				<div class="box1"></div>
				<div class="box2"></div>
			</div>
			<div class="box">
				<div class="box1"></div>
				<div class="box2"></div>
			</div>
			<div class="box">
				<div class="box1"></div>
				<div class="box2"></div>
			</div>
		
		
	</body>
</html>
